<template>
  <div class="compliant">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin/base/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>核心业务处理</el-breadcrumb-item>
      <el-breadcrumb-item>投诉信息管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <el-card>
      <el-container>
        <!--        头部表单-->
        <el-header>
          <div style="display: inline-block">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="投诉类型">
                <el-select v-model="formInline.comId" placeholder="投诉类型">
                  <el-option label="无" value=-1></el-option>
                  <el-option v-for="compliantType in compliantTypes" :label="compliantType.type"
                             :value="compliantType.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="处理状态">
                <el-select v-model="formInline.status" placeholder="处理状态">
                  <el-option label="无" value='-1'></el-option>
                  <el-option label="待处理" value=0></el-option>
                  <el-option label="已处理" value=1></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div style="float: right;display: inline-block;margin-right: 20px">
            <el-button type="primary" @click="dialogFormVisible= true">批量导入投诉</el-button>
          </div>
          <div style="float: right;display: inline-block;margin-right: 20px">
            <el-button type="success" @click="bathOutput">导出投诉数据</el-button>
          </div>
        </el-header>
        <el-divider></el-divider>
        <!--        体部表单-->
        <el-main>
          <el-dialog title="批量导入投诉" :visible.sync="dialogFormVisible">
            <el-upload
                class="upload-demo"
                drag
                action="http://localhost:8080/complaint/bathUpDate"
                multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-dialog>
          <template>
            <el-table
                ref="multipleTable"
                :data="compliants"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
              <el-table-column
                  type="selection"
                  width="55">
              </el-table-column>
              <el-table-column
                  prop="comType"
                  label="投诉类型"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="remarks"
                  label="投诉内容"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="owerName"
                  label="投诉人"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="comDate"
                  label="投诉时间"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="处理状态">
                <template slot-scope="scope">
                  <el-tag type="success" v-if="scope.row.status==1">已处理</el-tag>
                  <el-tag type="danger" v-else>待处理</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                  prop="clrName"
                  label="处理人"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-popconfirm
                      v-if="scope.row.status==0"
                      confirm-button-text='好的'
                      cancel-button-text='不用了'
                      icon="el-icon-info"
                      icon-color="red"
                      title="您确定此条投诉已完成处理？"
                      @confirm="handle(scope.$index, scope.row)"
                  >
                    <el-button slot="reference" size="mini" type="primary" style="margin-left:8px">
                      处理
                    </el-button>
                  </el-popconfirm>
                  <el-popconfirm
                      confirm-button-text='好的'
                      cancel-button-text='不用了'
                      icon="el-icon-info"
                      icon-color="red"
                      title="您确定删除此条投诉吗？"
                      @confirm="handleDelete(scope.$index, scope.row)"
                  >
                    <el-button slot="reference" size="mini" type="danger" style="margin-left:8px">
                      删除
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <el-button size="medium" type="danger" style="margin-top: 30px" @click="bathDelete">批量删除</el-button>
          <template>
            <div class="block">
              <el-pagination
                  background
                  @current-change="handleCurrentChange"
                  :current-page="paginations.page_index"
                  :page-size="paginations.page_size"
                  :total="paginations.total"
                  layout="total, prev, pager, next, jumper"
              >
              </el-pagination>
            </div>
          </template>
        </el-main>
      </el-container>
    </el-card>
  </div>


</template>
<script>


import axios from "axios";
export default {

  data() {
    return {
      token:"",
      paginations: {
        page_index: 1, //当前页
        total: 200, //总数
        page_size: 5, //一页显示多少
      },
      dialogFormVisible: false,
      formInline: {
        comId: "-1",
        status: '-1'
      },
      compliantTypes: [
        {
          id: 0,
          type: "小区环境问题",
        }
      ],
      compliants: [{
        id: 0,
        //投诉类型
        comType: '',
        //投诉日期
        comDate: '',
        //投诉人
        owerName: "",
        //处理状态
        status: 0,
        //处理人
        clrName: "",
        //投诉内容
        remarks: ""
      },],
      multipleSelection: [{}],
    }
  },
  created: function () {
    //加载投诉内容
    this.loadCompliant(1,this.paginations.page_size);
    //加载投诉类型
    this.loadCompliantType();
    this.token = "Bearer "+localStorage.getItem("accessToken");
    console.log("jwt为"+this.token)
  },
  methods: {
    //分页变更页数的调用方法
    handleCurrentChange(val) {
      this.paginations.page_index = val;
      console.log(`当前页: ${this.paginations.page_index},每页大小${this.paginations.page_size}`);
      this.loadCompliant(this.paginations.page_index,this.paginations.page_size);
    },
    bathDelete() {
      let deleteComplaintArr = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        //获取点击批量删除时,选中的项目的id
        deleteComplaintArr[i] = this.multipleSelection[i].id
      }
      axios.post("http://localhost:8080/complaint/bathDelete", deleteComplaintArr).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.loadCompliant()
        } else this.$message.error("删除失败")
      })
    },
    onSubmit() {
      console.log("status" + this.formInline.status);
      console.log("comId" + this.formInline.comId);
      if (this.formInline.status == -1 && this.formInline.comId == -1) {
        this.loadCompliant()
      } else {
        axios.get("http://localhost:8080/complaint/screenCompliant/" + this.formInline.comId + "/" + this.formInline.status)
            .then((response) => {
              this.compliants = response.data;
            })
      }
    },
    //更改选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //处理投诉
    handle(index, compliant) {
      axios.get("http://localhost:8080/complaint/handleCompliant/" + compliant.id).then((response) => {
        if (response.data == 1) {
          this.$message({
            message: '处理成功',
            type: 'success'
          })
          this.loadCompliant();
        } else this.$message.error("请先登录");
      })
    },
    handleDelete(index, compliant) {
      axios.get(`http://localhost:8080/complaint/deleteCompliant/${compliant.id}`).then((response) => {
        if (response.data == 1) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.loadCompliant();
        } else this.$message.error("您没有权限删除该条投诉,请联系管理员");
      })
    },
    loadCompliant(pageNum, PageSize) {
      let token = localStorage.getItem("accessToken");
      axios.get(`http://localhost:8080/complaint/loadCompliant/${pageNum}/${PageSize}`,{headers:{"Authentication":"Bearer "+token}}).then((response) => {
        if (response.data.state!=200){
          console.log("返回数据为:"+response.data)
          this.$message.error(response.data.message)
          return;
        }
        this.compliants=response.data.data.list;
        this.paginations.total=response.data.data.total
      })
    },
    loadCompliantType() {
      axios.get("http://localhost:8080/complaint/loadCompliantType").then((response) => {
        console.log("投诉类型为",response.data)
        this.compliantTypes = response.data;
      })
    },
    bathOutput() {
      // "http://localhost:8080/complaint/bathOutput"
      axios({
        method: 'get',
        url: `http://localhost:8080/complaint/bathOutput`,
        //params: params,
        responseType: 'blob',
        headers: {}
      }).then(response => {
        console.log(response);
        this.downloadFile(response.data);
      })
    },
    downloadFile(data) {
      // 文件导出
      if (!data) {
        return
      }
      let url = window.URL.createObjectURL(new Blob([data]));
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', '投诉表明细.xls');
      document.body.appendChild(link);
      link.click()
    }
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}

.el-table .cell {
  text-align: center;
}

.block {
  display: inline-block;
  float: right;
  margin-top: 30px;
}
</style>